<template>
	<u-popup v-model="show" mode="bottom" border-radius="20">
		<view class="body" v-if="show">
			<view class="title">优惠明细</view>
			<view class="subtitle">
				<text>
					商品
				</text>
			</view>
			<view class="label">
				<text class="left">{{info.vip_name}}</text>
				<text class="price">¥{{info.vip_price}}</text>
			</view>
			<view class="subtitle">
				<text>
					优惠
				</text>
			</view>
			<view class="label" v-if="integralNum > 0 && coupon">
				<text class="left">{{coupon.coupon_name}}</text>
				<text class="price">¥{{coupon.coupon_denomination}}</text>
			</view>
			<view class="label">
				<text class="left">积分抵扣</text>
				<text class="price">¥{{integralNum}}</text>
			</view>
			<view class="subtitle">
				<text>合计支付</text>
				<text>¥{{total}}</text>
			</view>
		</view>
		</view>
	</u-popup>
</template>

<script>
	import dialogSyncClose from "@/mixin/dialog-sync-close.js"
	export default {
		mixins: [dialogSyncClose()],
		props: {
			coupon: {
				type: Object,
				default: () => {}
			},
			info: {
				type: Object,
				default: () => {}
			},
			integralNum: {
				type: Number,
				default: 0
			},
			total: {
				type: Number,
				default: 0
			}
		},
		computed: {
			// total() {
			// 	let price = parseFloat(this.info.vip_price)
			// 	let off = 0
			// 	if(this.coupon){
			// 		off = parseFloat(this.coupon.coupon_denomination)
			// 	}
			// 	return price - off - this.integralNum
			// }
		},
		data() {
			return {

			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		font-size: 36rpx;
		text-align: center;
		font-weight: bold;
		margin-bottom: 50rpx;
	}

	.body {
		padding: 37rpx;
		box-sizing: border-box;

		.subtitle {
			font-size: 32rpx;
			font-weight: bold;
			@extend .flex-btw;
		}

		.label {
			@extend .flex-btw;
			margin-top: 21rpx;
			margin-bottom: 34rpx;
			margin-left: 15rpx;
			font-size: 28rpx;
		}
	}
</style>
